{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>后端数据展示</title>
  <!-- 引入 Bootstrap 样式 -->
  <link rel="stylesheet" href="{% static 'plugins/bootstrap/css/bootstrap.css' %}">
  <style>
    /* 自定义样式，用于水平居中 */
    .container {
      align-items: center;
      height: 70vh;
    }

    /* 自定义样式，横线式表格 */
    .custom-table {
      border-collapse: collapse;
      width: 100%;
    }

    .custom-table th, .custom-table td {
      border: 1px solid #dee2e6;
      padding: 8px;
      text-align: center;
    }

    /* 设置列宽比例*/
    .custom-table th:nth-child(1),
    .custom-table td:nth-child(1) {
      width: 40%;
    }

    .custom-table th:nth-child(2),
    .custom-table td:nth-child(2) {
      width: 40%;
    }

    .custom-table th:nth-child(3),
    .custom-table td:nth-child(3) {
      width: 20%;
    }
    /* 自定义样式，用于调整按钮位置 */
    .add-btn {
      {#font-size: 15px;#}
      {#position: relative;#}
        margin-top: 150px;

      {#top: -120px;#}
      {#right: -70px;#}
      width: 70PX;
       display: inline-block;
      {#writing-mode: horizontal-tb;#}
      background-color: #39a51f;
    }
  </style>
</head>
<body>

  <div class="container">
    <!-- 添加按钮 -->
  <button type="button" class="btn btn-success mb-3 add-btn " data-bs-toggle="modal" data-bs-target="#exampleModal">添加</button>
    <table class="custom-table">

      <thead>

        <tr>
          <th scope="col">级别</th>
          <th scope="col">折扣</th>
          <th scope="col">操作</th>
        </tr>
      </thead>
      <tbody>
        {% for data in res %}
            <tr>
            <td>{{ data.title }}</td>
            <td>{{ data.present }}</td>
            <td>
{#            <a href="#" class="edit-btn btn btn-primary">编辑</a>#}
            <button class="edit-btn btn btn-primary" data-item-id="{{ data.id }}">编辑</button>
            <button class="delete-btn btn btn-primary" data-item-id="{{ data.id }}">删除</button>
            </td>
            </tr>
        {% endfor %}

        </tr>
      </tbody>
    </table>
  </div>
   <!-- 添加弹窗 Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">添加数据</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <form id="addForm">
            {% csrf_token %}
            <div class="mb-3">
              <label for="level" class="form-label">级别</label>
                {{ form.title }}
            </div>
            <div class="mb-3">
              <label for="discount" class="form-label">折扣</label>
                {{ form.present }}
            </div>
            <button type="submit" class="btn btn-primary">提交</button>
          </form>
        </div>
      </div>
    </div>
  </div>
    <!-- 引入 Bootstrap JavaScript，用于一些交互功能 -->
  <script src="{% static 'js/jquery3.7.js' %}"></script>
  <script src="{% static 'plugins/bootstrap/js/bootstrap.js' %}"></script>

  <!-- JavaScript 代码，用于提交表单 -->
  <script>
    $(document).ready(function() {
        $("#addForm").submit(function (e) {
            e.preventDefault(); // 阻止表单默认提交行为
            var formData = $(this).serialize();
            // 在这里可以使用 AJAX 将表单数据提交给后端处理
            console.log("提交表单数据:", formData);
            $.ajax({
                type: "POST", // 请求类型
                url: "/level/list/", // 后端处理的 URL
                data: formData, // 发送的数据
                success: function (response) {
                    // 请求成功时的处理
                    console.log("后端返回的响应:", response);
                    // 在这里可以根据后端的响应进行相应的操作，比如刷新页面或者更新数据等
                },
                error: function (xhr, status, error) {
                    // 请求失败时的处理
                    console.error("请求失败:", status, error);
                    location.reload();
                }
            });
            // 关闭模态框
            $("#exampleModal").modal("hide");
            location.reload();
        });
        $('.delete-btn').on('click', function () {
            const itemID = $(this).data('item-id');
            console.log(itemID)

            // 弹出确认删除的对话框
            const isConfirmed = confirm("确定要删除吗？");

            if (isConfirmed) {
                $.ajax({
                    url: `/level/delete/${itemID}/`,  // 后端处理视图的URL
                    type: 'DELETE',  // 使用DELETE方法来表示删除操作
                    beforeSend: function (xhr, settings) {
                        // 在发送请求之前，将CSRF令牌添加到请求头中
                        xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
                    },
                    success: function (data) {
                        // 在成功删除后执行的操作
                        console.log('删除成功', data);
                        // 这里可以根据需要刷新页面或者更新UI等操作
                        location.reload();
                    },
                    error: function (xhr, status, error) {
                        // 在出错时执行的操作
                        console.error('删除时出错:', error);
                    }

                });
            }

        });
        $(".edit-btn").click(function () {
            const itemID = $(this).data('item-id');  // 这里假设item的ID为1，你需要根据实际情况获取ID
            $.ajax({
                type: "POST",
                url: "/level/edit_item/",  // 后端处理URL
                data: {
                    'item_id': itemID,
                    'csrfmiddlewaretoken': '{{ csrf_token }}'  // 添加Django CSRF令牌
                },
                success: function (response) {
                    // 在这里可以处理后端返回的响应
                    window.location.href = "/level/update/?item_id=" + itemID;  // 重定向到编辑页面
                },
                error: function (xhr, errmsg, err) {
                    console.log(xhr.status + ": " + xhr.responseText);
                }
            });
        });
    });
  </script>

</body>
</html>
